import React, { useContext } from 'react';
import styled from 'styled-components';
import ThemeContext from '../hooks/theme';

function Card(props) {
  const theme = useContext(ThemeContext);

  return <CardContainer theme={theme}>{props.children}</CardContainer>;
}

const CardContainer = styled.div`
  background-color: ${(props) => props.theme.backgroundColor};
  color: ${(props) => props.theme.textColor};
  padding: 20px;
`;

export default Card;
